<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            
            var data;
            var n;
            var stack = [];

            var height, width;
            var canvas;
            var ctx;
            var index = 0;
            var cache = [];


            // 生成随机数组
            function randomList(start, end, length) {
                var random_list = []
                for (var i = 0; i < length; i++) {
                    random_list.push(Math.random() * (end - start) + start)
                }
                return random_list;
            }


            // 保存快照
            function snapshot(data) {
                cache.push(data.concat());
            }


            function partition(arr, p, r) {
                var x = arr[r];
                i = p - 1;
                for (var j = p; j <= r - 1; j++) {
                    if (arr[j] <= x) {
                        i++;
                        exchange(arr, i, j);
                    }
                }
                exchange(arr, i + 1, r);
                return i + 1;
            }
			

			function randomized_partition(arr, p, r) {
				var i = parseInt(Math.random() * (r - p + 1) + p);
				exchange(arr, r, i);
				return partition(arr, p, r);
            }
            

            function quickSort_(arr, p, r, stack) {
                if (p < r) {
                    var q = randomized_partition(arr, p, r);
                    stack.push([arr, q + 1, r]);
                    stack.push([arr, p, q - 1]);
                }
            }


            function exchange(arr, i, j) {
                snapshot(arr);
                var temp = arr[i];
                arr[i] = arr[j];
                arr[j] = temp;
            }

            
            // 作者：凡凡的小web
            // 链接：https://www.jianshu.com/p/6c23e62741b7
            // 来源：简书
            // 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
            function hslToRgb(h, s, l){  
                var r, g, b;        
                if(s == 0){           
                    r = g = b = l; // achromatic       
                }else{            
                    var hue2rgb = function hue2rgb(p, q, t) {                
                        if(t < 0) t += 1;                
                        if(t > 1) t -= 1;                
                        if(t < 1/6) 
                            return p + (q - p) * 6 * t;               
                        if(t < 1/2) 
                            return q;                
                        if(t < 2/3) 
                            return p + (q - p) * (2/3 - t) * 6;               
                        return p;           
                    }            
                        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;  
                        var p = 2 * l - q;            
                        r = hue2rgb(p, q, h + 1/3);            
                        g = hue2rgb(p, q, h);           
                        b = hue2rgb(p, q, h - 1/3);       
                    }       
                return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];    
            }


            function color(value) {
                function hex(value) {
                    var str = parseInt(value).toString(16);
                    while (str.length < 2)
                        str = '0' + str;
                    return str;
                }
                var h = value;
                var s = 0.9;
                var l = 0.4;
                var rgb = hslToRgb(h, s, l);
                var red = hex(rgb[0]);
                var green = hex(rgb[1]);
                var blue = hex(rgb[2]);
                return '#' + red + green + blue;
            }


            function init() {
                canvas = document.getElementById("cvs");
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight;
                ctx = canvas.getContext('2d');
                n = parseInt(canvas.width / 2);
                width = canvas.width;
                height = canvas.height;
                data = randomList(0, 1, n);
                stack.push([data, 0, n - 1]);
                setInterval(execute, 10);
            }
    

            function execute() {
                // 画图
                if (index < cache.length) {
                    screen = cache[index];
                    ctx.fillStyle = 'black';
                    ctx.fillRect(0, 0, width, height);
                    const widthRect = parseInt(width / n);
                    for (var i = 0; i < n; i++) {
                        var value = screen[i];
                        ctx.fillStyle = color(value);
                        var heightRect = parseInt(value * height);
                        var xRect = parseInt(widthRect * i);
                        var yRect = parseInt(height - heightRect);
                        ctx.fillRect(xRect, yRect, widthRect, heightRect);
                    } 
                    index++;
                }
                
                // 排序
                if (stack.length > 0) {
                    var arg = stack.pop();
                        arg.push(stack);
                        quickSort_.apply(null, arg);
                }
                else 
                    snapshot(data);
            }
    
            </script>
    </head>
    <body style="margin:0px;" onload="init()">
        <canvas id="cvs" style="width:100%;height:100%;background:black;">你的浏览器不支持此网页</canvas>
    </body>
</html>